<template>
	<view class="">

		<block v-for="(item, indexhuodong) in list" :key="indexhuodong">
			<view class="boxlist dk-yuanjiao tn-shadow tn-border-solid"
				@click="navigateToFn({ url: '/circleMixinPages/reserve_show?id='+item.id, checkLogin: false })">
				<view class="boxitem tn-padding tn-bg-white">
					<view class="topbox">


						<view class="fbox tn-flex tn-flex-row-between tn-flex-col-center">
							<view class="flbox tn-flex tn-flex-col-center">
								<view class="tagb tn-text-bold ">{{item.title}}</view>
							</view>
							<view class="">
								<tn-button padding="20rpx 0" width="60px" size="sm" shape="round"
									backgroundColor="#002347" fontColor="#ffffff">
									<text class="tn-text-bold">去报名</text>
								</tn-button>
							</view>
						</view>
					</view>
					<view class="topbox tn-margin-sm">
						<image :src="item.images" style="height:400rpx;border-radius: 10px;" mode="aspectFill"></image>
					</view>

					<view class="botbox">
						<view class="fbbox tn-flex tn-flex-row-between tn-flex-col-center">

							<view class="tagicon tn-flex tn-flex-col-center ">
								<view class="">
									<text class="tn-icon-location  tn-text-xl"></text>
									<text v-if="item.distance">{{item.distance}}km</text>
								</view>
								<view class="text">
									{{item.address}}
								</view>
							</view>
							<view class="taplight tn-flex tn-flex-col-center">
								<view class="text">{{item.join_num+item.join_nv_num}}人报名</view>

							</view>
						</view>



						<view class="address tn-flex tn-flex-row-between tn-flex-col-center">
							<view class="flbox tn-flex  tn-flex-col-center tn-text-sm">
								 举办时间：{{item.times}}
							</view>
							<view class="price" v-if="item.nan_price>0">
								<text class="  ">(男)¥{{item.nan_price}}</text>
							</view>
							<view class="price" v-else>(男)免费</view>
							<view class="price" v-if="item.nv_price>0">
								<text class="  ">(女)¥{{item.nv_price}}</text>/人
							</view>
							<view class="price" v-else>(女)免费</view>
						</view>



					</view>
				</view>
			</view>

		</block>
	</view>

</template>

<script>
	export default {
		props: ['list', 'index'],
		created() {

		},
		data() {
			return {
				groupList: [],
				noClick: true,
				videoPlay: false,
				isplay: false,
				//	body: this.item.content.replace(/<br>/g, "\n").replace(/<p>/g, "").replace(/<\/p>/g, "\n")
			}
		},


		methods: {
			xuanze(item) {
				uni.$emit('dongtai_item', item)
				//uni.navigateBack()
			},
			doPreviewImage(tulist, i) {
				{
					// uni.previewImage({
					// 	current: i,
					// 	urls: tulist
					// });
				}

			},

		}
	};
</script>


<style scoped lang="scss">
	.tn-icon-moments,
	.tn-icon-location,
	.tn-icon-shop {
		margin-top: 5upx;
	}

	.boxitem {
		border-radius: 16upx;

		.topbox {
			.fbox {
				.flbox {
					.taga {
						border: 1px solid;
						border-color: #d67609;
						color: #d67609;
						border-radius: 8upx;
						margin-left: 10upx;
						padding: 2upx 10upx;
					}

					.tagb {
						border-radius: 8upx;
						margin-left: 10upx;
						padding: 2upx 10upx;
					}
				}

				.frbox {
					background: #000;
					color: #fff;
					border-radius: 40upx;
					padding: 6upx 25upx;
				}
			}

			.desc {
				margin-top: 20upx;

				.tagicon {
					border-radius: 8upx;
					background: #e6e6e6;
					padding: 0 10upx;

				}

				.drbox {
					padding-left: 10upx;
					color: #a8a8a8;
				}

			}
		}

		.midbox {
			margin-top: 20upx;

			.imgpic {
				width: 200upx;
				height: 200upx;

				.img16 {
					width: 100%;
					height: 100%;
					border-radius: 16upx;
				}
			}
		}

		.botbox {
			margin-top: 20upx;

			.fbbox {
				.taplight {
					.text {
						padding-left: 10upx;
						color: #a8a8a8;
					}
				}
			}

			.tagicon {
				.text {
					margin-left: 20upx;
				}
			}

			.timestamp {
				margin-top: 20upx;
			}

			.address {
				margin-top: 20upx;
			}
		}
	}


	/* 文章内容 start*/
	.blogger {
		&__item {
			padding: 30rpx;
		}

		&__author {
			&__btn {
				margin-right: -12rpx;
				padding: 0 20rpx;
			}
		}

		&__desc {
			line-height: 55rpx;

			&__label {
				padding: 0 20rpx;
				margin: 0rpx 18rpx 0 0;

				&--prefix {
					color: #00FFC8;
					padding-right: 10rpx;
				}
			}

			&__content {}
		}

		&__content {
			margin-top: 18rpx;

			&__data {
				line-height: 46rpx;
				text-align: justify;
				overflow: hidden;
				transition: all 0.25s ease-in-out;

			}

			&__status {
				margin-top: 10rpx;
				font-size: 26rpx;
				color: #82B2FF;
			}
		}

		&__main-image {
			border-radius: 16rpx;

			&--1 {
				max-width: 80%;
				max-height: 300rpx;
			}

			&--2 {
				max-width: 280rpx;
				max-height: 260rpx;
			}

			&--3 {
				height: 212rpx;
				width: 100%;
			}
		}

		&__count-icon {
			font-size: 40rpx;
			padding-right: 5rpx;
		}

		&__ad {
			width: 100%;
			height: 500rpx;
			transform: translate3d(0px, 0px, 0px) !important;

			::v-deep .uni-swiper-slide-frame {
				transform: translate3d(0px, 0px, 0px) !important;
			}

			.uni-swiper-slide-frame {
				transform: translate3d(0px, 0px, 0px) !important;
			}

			&__item {
				position: absolute;
				width: 100%;
				height: 100%;
				transform-origin: left center;
				transform: translate3d(100%, 0px, 0px) scale(1) !important;
				transition: transform 0.25s ease-in-out;
				z-index: 1;

				&--0 {
					transform: translate3d(0%, 0px, 0px) scale(1) !important;
					z-index: 4;
				}

				&--1 {
					transform: translate3d(13%, 0px, 0px) scale(0.9) !important;
					z-index: 3;
				}

				&--2 {
					transform: translate3d(26%, 0px, 0px) scale(0.8) !important;
					z-index: 2;
				}
			}

			&__content {
				border-radius: 40rpx;
				width: 640rpx;
				height: 500rpx;
				overflow: hidden;
			}

			&__image {
				width: 100%;
				height: 100%;
			}
		}
	}

	/* 文章内容 end*/
</style>